<template>
  <div class="merchantCard">
    <div class="header">
      <img :src="props.merchantData.logoFile.url" alt="">
      <ul>
        <li>
          <div class="shopName">
            <span>{{ props.merchantData.name }}</span>
          </div>
        </li>
        <li>
          <van-space>
            <div class="tagName" v-if="props.merchantData.settled === 1">
              <img :src="certifiedBadge" alt="">
              <span>已入驻</span>
            </div>
            <div class="tagName special" v-if="props.merchantData.settled !== 1">
              <span>未入驻</span>
            </div>
            <van-tag
              color="#f4f4f4"
              text-color="#616362"
              v-for="item in props.merchantData.tagsList"
              type="primary">
              {{ item }}
            </van-tag>
          </van-space>
        </li>
        <li>
          <img :src="starLogo" alt="">
          <span>4.6</span>
          <span>（2000）</span>
        </li>
      </ul>
    </div>
    <ul class="main">
      <li>
        <span>营业时间</span>
        <span>{{ props.merchantData.businessTime }}</span>
      </li>
      <li>
        <span>人均价格</span>
        <span style="color: #f7473f;">{{ props.merchantData.averagePrice }}</span>
      </li>
    </ul>
    <van-divider style="margin: 12px 0;" />
    <div class="snapshot">
      <span>简介：</span>
      {{ props.merchantData.snapshot }}
    </div>
    <van-divider style="margin: 12px 0;" />
    <ul class="footer">
      <li>
        <div>商圈地点</div>
        <div>{{ props.merchantData.address }}</div>
      </li>
      <li>
        <div @click="handleAction('导航')">
          <van-icon name="location" />
          <span>导航</span>
        </div>
        <div @click="handleAction('电话')">
          <van-icon name="phone" />
          <span>电话</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import certifiedBadge from "@/assets/image/certified-badge.png";
import starLogo from "@/assets/image/Star.png";

function callPhoneNumber(number) {
  var tel = document.createElement('a');
  tel.href = 'tel:' + number;
  document.body.appendChild(tel);
  tel.click();
  document.body.removeChild(tel);
}

const props = defineProps({
  merchantData: Object
});

const handleAction = (type) => {
  if (type === "导航") {
    window.open(props.merchantData.addressGoogle, "_blank");
  }else {
    callPhoneNumber(props.merchantData.phone);
  }
}

</script>
<style scoped lang="less">
div.merchantCard {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 16px;
  background: #ffffff;
  >div.header {
    width: 100%;
    height: 70px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    >img {
      width: 70px;
      height: 70px;
      border-radius: 8px;
      margin-right: 10px;
    }
    >ul {
      width: calc(100% - 70px - 10px);
      >li:first-child {
        div.shopName {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
      >li:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: start;
        div.tagName {
          width: 55px;
          height: 18px;
          border-radius: 12px;
          background: rgba(37, 197, 47, 0.1);
          display: flex;
          justify-content: center;
          align-items: center;
          &.special {
            background: rgba(0 ,0, 0, 0.1);
            span {
              color: #000000
            }
          }
          img {
            width: 14px;
            height: 14px;
          }
          span {
            color: rgba(22, 181, 33, 1);
            font-size: 12px;
          }
        }
      }
      >li:last-child {
        display: flex;
        align-items: center;
        justify-content: start;
        >img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        >span:nth-child(2) {
          font-size: 14px;
          font-weight: bold;
        }
        >span:nth-child(3) {
          font-size: 14px;
          color: rgba(156, 156, 156, 1);
        }
      }
    }
  }
  >ul.main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    li {
      >span:nth-child(1) {
        font-size: 14px;
        font-weight: bold;
        margin-right: 12px;
      }
      >span:nth-child(2) {
        font-size: 16px;
      }
    }
  }
  >div.snapshot {
    span {
      font-size: 14px;
      font-weight: bold;
    }
  }
  >ul.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    >li:first-child {
      div:nth-child(1) {
        font-size: 14px;
        font-weight: bold;
      }
      div:nth-child(2) {
        font-size: 14px;
        color: rgba(156, 156, 156, 1);
      }
    }
    >li:last-child {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      div {
        margin-left: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .van-icon {
          font-size: 18px;
          margin-bottom: 4px;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
